<template>
  <div>
    <div class="header">
      <div class="header-content">
        <div class="logo">
          <router-link to="/"
            ><img src="https://s1.ax1x.com/2022/05/31/X8dyDA.png" alt=""
          /></router-link>
        </div>
        <ul class="arrs">
          <li>
            <a href="javascript:void(0)">我要求购</a>
          </li>
          <li>
            <a href="javascript:void(0)">我要上架</a>
          </li>
          <li>
            <a href="javascript:void(0)" @click="handleOpen">成为商家</a>
          </li>
          <!-- <li v-for="(item, i) in arrs" :key="i">
            <router-link :to="item.url">{{ item.test }}</router-link>
          </li> -->
        </ul>
        <div class="search">
          <input
            type="text"
            placeholder="请输入关键字..."
            @keyup.13="searchshop()"
            v-model="search"
          />
        </div>
        <div class="login-area">
          <ul>
            <li class="collection"><span>收藏网站</span></li>
            <li class="shop-cart">
              <router-link to="/shopping"
                ><!-- <img src="../imgs/购物车.png" alt=""
              /> --><i
                  class="iconfont icon-shop"
                  style="font-size: 22px; color: red"
                ></i
              ></router-link>
            </li>
            <li
              class="login"
              @click="(login = true), (register = false)"
              v-if="LoginStatus == 0"
            >
              登录
            </li>
            <li class="heng" v-if="LoginStatus == 0">/</li>
            <li
              class="reg"
              @click="(login = false), (register = true)"
              v-if="LoginStatus == 0"
            >
              注册
            </li>
            <li class="user" v-else>
              <img :src="headPhoto" alt="" @mouseover="hovers()" />
            </li>
          </ul>
          <div class="user-detail" v-if="hover == true" @mouseleave="hoveron()">
            <div class="user-img"><img :src="headPhoto" alt="" /></div>
            <div class="user-name">{{ loguser }}</div>
            <div class="user-buttons">
              <div>
                <router-link to="/userCenter?Active=1">个人中心</router-link>
              </div>
              <div>
                <router-link to="/userCenter?Active=2">订单中心</router-link>
              </div>
              <div><a href="javascript:void(0);">积分商城</a></div>
              <div>
                <router-link to="/userCenter?Active=1">个人设置</router-link>
              </div>
            </div>
            <div class="user-close">
              <span @click="userclose()">安全退出</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 登录模块 -->
    <div class="login-b" v-if="login">
      <div>
        <h3>账号登录</h3>
        <div>
          <input
            type="text"
            placeholder="请输入账号/邮箱"
            v-model="username"
            @blur="usernameblur"
          />
          <div class="logmistake" v-if="logmistake">账号格式错误</div>
        </div>
        <div>
          <input
            type="password"
            placeholder="请输入密码"
            v-model="password"
            @blur="pwdblur()"
          />
          <div class="pwdmistake" v-if="pwdmistake">密码格式错误</div>
        </div>
        <div class="jz">
          <div><input type="checkbox" /> <span>7天内自动登录</span></div>
          <div><router-link to="">忘记密码</router-link></div>
        </div>
        <div class="button">
          <el-button type="danger" @click="logins()">登录</el-button>
        </div>
        <div class="jump-reg" @click="jumpreg()">快速注册</div>
        <div class="xy">登录即同意慕课网隐私条例</div>
        <div class="close" @click="close()">
          <img src="../imgs/关闭1.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 注册模块 -->
    <div class="reg-b" v-if="register">
      <div>
        <h3>快速注册</h3>
        <div class="reg-email">
          <input
            type="email"
            placeholder="请输入注册邮箱号"
            @blur="regblurname()"
            v-model="regname"
          />
          <div class="logmistake" v-if="regnamestate">账号格式错误</div>
        </div>
        <div class="reg-pw">
          <input
            type="password"
            placeholder="请输入密码"
            v-model="registerpwd"
            @blur="regblurpwd()"
          />
          <div class="regmistake" v-if="regpasswordstate">密码格式错误</div>
        </div>
        <div class="reg-yzm">
          <input type="text" placeholder="请输入验证码" v-model="codes" /><span
            @click="upyzmcode()"
            >{{ verifycode }}</span
          >
          <div class="regyzm" v-if="verifycodestate">{{ yzmcode }}</div>
        </div>
        <div class="reg-ty">
          <input type="checkbox" /> <span>同意协议</span>
        </div>
        <div class="reg-button">
          <el-button type="danger" @click="registers()">立即注册</el-button>
        </div>
        <div class="jump-login" @click="jumplog()">返回账号登录</div>
        <div class="close" @click="close()">
          <img src="../imgs/关闭1.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 成为商家模块 -->
    <business-register
      :dialogVisible="dialogVisible"
      @dialogClose="dialogClose"
    ></business-register>
    <div class="other"></div>
  </div>
</template>

<script>
import BusinessRegister from "./RegBusiness/BusinessRegister.vue";
export default {
  components: {
    BusinessRegister,
  },
  data() {
    return {
      dialogVisible: false,
      //广告位置的值
      // arrs: [
      //   { url: "a", test: "我要求购" },
      //   { url: "b", test: "我要上架" },
      //   { url: "/regbusiness", test: "注册商家" },
      // ],
      //登录界面开关
      login: false,
      //注册界面开关
      register: false,
      //登录账号的错误信息开关
      logmistake: false,
      //登录密码的错误信息开关
      pwdmistake: false,
      //登录账号的value值
      username: "",
      //登录密码的value值
      password: "",
      //登录的账号错误开关
      namestate: false,
      //登录的密码错误密码
      pwdstate: false,
      //验证码
      verifycode: "获取验证码",

      //注册账号的value值
      regname: "",
      //注册密码的value值
      registerpwd: "",
      //注册的账号错误信息
      regnamestate: false,
      //注册的密码错误信息
      regpasswordstate: false,
      //注册的验证码是否通过
      verifycodestate: false,
      //是否通过协议
      regagreementstate: false,
      //注册的账号正则是否通过
      reglogmistake: false,
      //注册的密码正则是否通过
      regpwdstake: false,
      //验证码的报错信息
      yzmcode: "",
      //验证码
      codes: "",
      //邮箱返回的code值
      returncode: "",
      //邮箱的session
      sessionId: "",
      //登录状态
      LoginStatus: "0",
      //用户详情显示
      hover: false,
      //用户登录后显示的名字
      loguser: "",
      //登录成功的头像
      headPhoto: "",
      //搜索的value值
      search: "",
    };
  },
  //监视登录状态
  watch: {
    LoginStatus: {
      handler(newValue) {
        this.$store.LoginStatus = newValue;
      },
    },
  },
  updated() {
    this.$bus.$on("setAvator", (val) => {
      this.headPhoto = "http://114.132.236.89:8888/static/" + val;
    });
  },
  methods: {
    //商家注册弹出框自定义关闭方法
    dialogClose(val) {
      this.dialogVisible = val;
    },
    //成为商家点击事件
    handleOpen() {
      if (this.$store.state.LoginStatus == 0) {
        this.$message({
          message: "请先登录",
          type: "warning",
        });
        return false;
      }
      this.dialogVisible = true;
    },
    //进入登录
    jumplog() {
      this.login = true;
      this.register = false;
    },
    //进入注册
    jumpreg() {
      this.login = false;
      this.register = true;
    },
    //登录账号是否符合正则
    usernameblur() {
      var usname = /[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (usname.test(this.username)) {
        this.namestate = true;
        this.logmistake = false;
      } else {
        this.namestate = false;
        this.logmistake = true;
      }
    },
    //登录密码离开时判断,是否符合正则
    pwdblur() {
      // var pwd=/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/
      if (this.password != "") {
        this.pwdstate = true;
        this.pwdmistake = false;
      } else {
        this.pwdstate = false;
        this.pwdmistake = true;
      }
    },
    //账号登录并把值传给vuex
    logins() {
      var data = {
        email: this.username,
        password: this.password,
      };
      if (this.namestate == true && this.pwdstate == true) {
        this.$axios
          .post("/login/email", data, {})
          .then((res) => {
            console.log(res);
            if (res.data.code == 200) {
              this.$message({
                message: "欢迎您，登录成功",
                duration: 1200,
                type: "success",
              });
              this.$store.state.userid = res.data.data.id;
              this.$store.state.username = res.data.data.username;
              this.$store.state.userphoto = res.data.data.headPhoto;
              localStorage.setItem("token", res.data.data.token);
              this.$store.state.LoginStatus = 1;
              this.LoginStatus = 1;
              this.loguser = res.data.data.username;
              this.username = "";
              this.password = "";
              this.login = false;
              this.headPhoto =
                "http://114.132.236.89:8888/static/" + res.data.data.headPhoto;
            } else {
              this.$message({
                message: res.data.message,
                duration: 1200,
                type: "error",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$message({
          message: "请正确输入账号和密码",
          duration: 1200,
          type: "error",
        });
      }
    },
    // 关闭按钮
    close() {
      this.login = false;
      this.logmistake = false;
      this.pwdmistake = false;
      this.register = false;
      this.regnamestate = false;
      this.regpasswordstate = false;
      this.verifycodestate = false;
    },
    //注册账号的正则
    regblurname() {
      var usname = /[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (usname.test(this.regname)) {
        this.reglogmistake = true;
        this.regnamestate = false;
      } else {
        this.reglogmistake = false;
        this.regnamestate = true;
      }
    },
    //注册密码的正则
    regblurpwd() {
      var regpwd =
        /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;
      if (regpwd.test(this.registerpwd)) {
        this.regpwdstake = true;
        this.regpasswordstate = false;
      } else {
        this.regpwdstake = false;
        this.regpasswordstate = true;
      }
    },
    //获取验证码
    upyzmcode() {
      if (this.reglogmistake == true) {
        this.$axios
          .get("/email", {
            params: {
              email: this.regname,
            },
          })
          .then((res) => {
            this.sessionId = res.data.data.sessionId;
            this.returncode = res.data.code;
            console.log(this.returncode);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.yzmcode = "请输入正确的邮箱";
        this.verifycodestate = true;
      }
    },
    //显示用户信息
    hovers() {
      this.hover = true;
    },
    //隐藏
    hoveron() {
      this.hover = false;
    },
    //退出登录
    userclose() {
      this.hover = false;
      this.LoginStatus = 0;
      this.$store.state.LoginStatus = 0;
      this.loguser = "";
    },
    //发送注册请求
    registers() {
      var data = {
        code: this.codes,
        email: this.regname,
        pwd: this.registerpwd,
      };
      if (
        this.reglogmistake == true &&
        this.regpwdstake == true &&
        this.returncode == 200
      ) {
        // console.log(this.regname,this.code,this.registerpwd);
        this.$axios
          .post("/registered", data, {
            headers: {
              "Content-type": "application/json",
              sessionId: this.sessionId,
            },
          })
          .then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: "您的账号注册成功",
                duration: 1200,
                type: "success",
              });
              this.codes = "";
              this.regname = "";
              this.registerpwd = "";
              this.register = false;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.returncode == 401) {
        this.$message({
          message: "该邮箱已被注册",
          duration: 2000,
          type: "error",
        });
      } else {
        console.log(this.reglogmistake, this.regpwdstake, this.returncode);
        alert("请按规则输入");
        this.$message({
          message: "请按规则输入",
          duration: 2000,
          type: "error",
        });
      }
    },
    //搜索功能
    searchshop() {
      this.$store.state.searchshop = this.search;
      this.$router.push("/search");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../css/top.css");
</style>
